///<reference path="./index.d.ts" />
import { defineComponent, ref } from "vue"
import orderLess from "./index.module.less"
import OrderItem from './item/index.tsx'

export default defineComponent({
  setup(props) {
    const orderList = ref<Array<Product>>([
      {
        id: 1,
        price: 599,
        goods: [
          {
            id: 1,
            img: "/img/g7small.png",
            name: "巴洛克华冠",
            num: 1,
            arg: [
              {
                key: "材质",
                value: '纯棉'
              },
              {
                key: "尺寸",
                value: 'S（30mm*30mm）'
              }
            ],
          },
          {
            id: 2,
            img: "/img/g6.png",
            name: "巴洛克华冠",
            num: 1,
            arg: [
              {
                key: "材质",
                value: '纯棉'
              },
              {
                key: "尺寸",
                value: 'S（30mm*30mm）'
              }
            ],
          }
        ],
        status: 2,
        text: "您的订单正在配送中"
      },
      {
        id: 2,
        price: 599,
        goods: [
          {
            id: 3,
            img: "/img/g5.png",
            name: "巴洛克华冠",
            num: 1,
            arg: [
              {
                key: "材质",
                value: '纯棉'
              },
              {
                key: "尺寸",
                value: 'S（30mm*30mm）'
              }
            ],
          }
        ],
        status: 3,
        text: "您的订单已送达"
      }
    ])
    
    return () => (
      <div class={ orderLess.profile_order }>
        <div class={ orderLess.profile_order_items  }>
          {
            orderList.value.map(item => (
              <OrderItem
                item={item}
                key={item.id}
              />
            ))
          }
        </div>
      </div>
    )
  }
})